<%@page import="com.wzqj.agent.common.ConfigHelper"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!doctype html>
<html>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<jsp:include page="../common/import.jsp" flush="true"></jsp:include>
<%-- <script src="${base}/agent/public/js/ajaxupload.js" type="text/javascript"></script> --%>
<%-- <script src="${base}/agent/public/js/map.js"></script> --%>
<!--引用百度地图API-->
<style type="text/css">
   html,body{margin:0;padding:0;}
   .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
   .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<%=ConfigHelper.getProperty("BAIDU_KEY")%>"></script>


<body>
<%-- <jsp:include page="../common/header.jsp" flush="true"></jsp:include> --%>
<div class="header">
	<div class="container clear">
    	<a class="fl" href="${base}/agent/merchant/merchantList.xhtml"><img src="http://www.wangpos.com/public/images/logo.png" alt="旺POS"></a>
        <a class="fl cfff f16" href="${base}/agent/merchant/merchantList.xhtml">&#8226;&nbsp;代理商平台</a>
        <a class="fr cfff" href="${base}/agent/user/logout.xhtml">退出</a>
        <a class="fr cfff mr10" href="${base}/agent/user/personalCenter.xhtml"><span class="iconfont mr5">&#xf012d;</span>${user.username}</a>
        <%-- 备用：显示用户等级
        <a class="fr cfff mr10" href="javascript:">${user.username}</a> 
        --%>
    </div>
</div>

<div class="p20 bgfff">
	<div class="container bgfff pb50">
	
	<ul class="clear tc f18 mt20 add-store-ul">
        	<li class="fl lihover">搜索门店</li>
            <li class="fl lihover">填写信息</li>
            <li class="fl lihover">预览并提交</li>
        </ul>
        
		<!--for submit -->
		<input type="hidden" id="qualificationId" name="qualificationId" value="${qualificationId}">
		<input type="hidden" id="mcode" name="mcode" value="">
		<input type="hidden" id="userId" name="userId" value="${user.id}">
		<input type="hidden" id="name" name="name" value="${store.name}">
		<input type="hidden" id="tel" name="tel" value="${store.tel}">
		<input type="hidden" id="lat" name="lat" value="${store.lat}">
		<input type="hidden" id="lng" name="lng" value="${store.lng}">
		
		<input type="hidden" id="id1" name="id1" value="${store.level1}">
		<input type="hidden" id="bizClassify1" name="bizClassify1" value="${store.bizClassify1}">
		<input type="hidden" id="id2" name="di2" value="${store.level2}">
		<input type="hidden" id="bizClassify2" name="bizClassify2" value="${store.bizClassify2}">
		<input type="hidden" id="id3" name="id3" value="${store.level3}">
		<input type="hidden" id="bizClassify3" name="bizClassify3" value="${store.bizClassify3}">
		
		<input type="hidden" id="contactName" name="contactName" value="${store.contactName}">
		<input type="hidden" id="contactPhone" name="contactPhone" value="${store.contactPhone}">
		<input type="hidden" id="busImg" name="busImg" value="${store.busImg}">
		<input type="hidden" id="shopImg" name="shopImg" value="${store.shopImg}">
		
    	<div class="p20">
        	<div class="clear">
            	<%-- <button class="fr bg1eb9ef cfff p5 b-radius w60" onclick="toEdit('${store.storeId}')"><span class="iconfont">&#xf0168;</span>&nbsp;编辑</button> --%>
                <h2 class="bb lg30 h30 f18 c000 pb5">基本信息</h2>
            </div>
            
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">店铺名称：</div>
                <div class="fl">${store.name}</div>
            </div>
            
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">店铺电话：</div>
                <div class="fl">${store.tel}</div>
            </div>
            
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">店铺地址：</div>
                <div class="fl">
                	<p>${store.province}${store.city}${store.area}${store.address_detail}</p>
                	<!-- user for geo2location -->
	                <input id="province" type="hidden" name="province" value="${store.province}">
	                <input id="city" type="hidden" name="city" value="${store.city}">
	                <input id="area" type="hidden" name="area" value="${store.area}">
	                <input id="address_detail" type="hidden" name="address_detail" value="${store.address_detail}">
	                <input id="location" type="hidden" name="location" value="${store.address.location}">
	                
	                <input id="fcity" type="hidden" name="fcity" value=""/>
	                <input id="farea" type="hidden" name="farea" value=""/>
	                
	                <input type="hidden" id="uid" name="uid" value=""/>
	                <input type="hidden" id="id" name="id" value=""/>
	                <input type="hidden" id="from" name="from" value=""/>
	                
	                <input type="hidden" class="input10" name="addressDetail" id="addressDetail" value="">
	                
	    	    	<!-- 地图组件 -->
		        	<div class="map_main" id="mapd" style="width:700px !important;height:320px !important;margin-top: 20px;"></div>
		            <script type="text/javascript">
		            (function(){
		            		
		            	//根据位置定位标注
		        		/* var locatio = ${store.address.location};
		        		var loc = locatio+",";
		        		var xy = loc.split(','); */
		        		var y = ${store.lat};
		        		var x = ${store.lng};
		             	var city = $("#city").val();
		             	var area = $("#area").val();
		             	var address_detail = $("#address_detail").val();
		             	if (x!=null||y!=null) {
				            // 百度地图API功能
				            // 创建Map实例
			            	var map = new BMap.Map("mapd");    
			        		//定义一个中心点坐标
			             	var point = new BMap.Point(x, y);
			             	//设定地图的中心点和坐标并将地图显示在地图容器中
			             	map.centerAndZoom(point, 15);   
			             	 //创建标注	
			             	var marker = new BMap.Marker(point);
			             	//跳动的动画
			             	marker.setAnimation(BMAP_ANIMATION_BOUNCE);
			             	//将标注添加到地图中
			             	map.addOverlay(marker);  
			             	map.setCenter(point); 
						}
		            	})();
		            </script>
                </div>
            </div>
            
            <h2 class="bb lg30 h30 f18 c000 pb5 mt20">联系人信息</h2>
            
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">所属行业：</div>
                <div class="fl">
                	<%-- <c:forEach items="${store.bizClassify}" var="biz">${biz}</c:forEach> --%>
                	${store.bizClassifyNames}
                </div>
            </div>
            
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">负责人姓名：</div>
                <div class="fl">${store.contactName}</div>
            </div>
            
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">负责人电话：</div>
                <div class="fl">${store.contactPhone}</div>
            </div>
            
            <h2 class="bb lg30 h30 f18 c000 pb5 mt20">资质认证</h2>
            
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">营业执照：</div>
            	<c:if test="${store.busImg!=null||store.busImg!=''}">
                <div class="fl h150 b w300">
                	<%-- <img src="<%=ConfigHelper.getProperty("ALIYUN_URL")%>${store.busImg}" width="300" height="150"> --%>
                	<div class="fl b" style="background:url(<%=ConfigHelper.getProperty("ALIYUN_URL")%>${store.busImg}) no-repeat center;background-size:auto 100%;width:300px; height:200px"></div>
                </div>
            	</c:if>
            </div>
            <div class="h50"></div>
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">门店照片：</div>
                	<div class="fl" style="width:900px">
		            	<c:forEach items="${store.shopImg}" var="busImg">
		            	<c:if test="${busImg!=null||busImg!=''}">
		                	<%-- <img class="fl" src="<%=ConfigHelper.getProperty("ALIYUN_URL")%>${busImg}" width="300" height="150"> --%>
		                	<div class="fl b" style="background:url(<%=ConfigHelper.getProperty("ALIYUN_URL")%>${busImg}) no-repeat center;background-size:auto 100%;width:300px; height:200px"></div>		            	</c:if>
		            	</c:forEach>
                	</div>
            </div>
            <div class="tc pt30 cfff">
            	<button class="bga0 p10 w100 b-radius" onclick="backToSearchPage()">上一步</button>
            	<button class="bg1eb9ef p10 w100 b-radius ml30" onclick="addAndBind()">提交</button>
            </div>
        </div>
</div>
</div>

<jsp:include page="../common/footer.jsp" flush="true"></jsp:include>


<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function addAndBind(){
	var userId = $("#userId").val();
	var qualificationId = $("#qualificationId").val();
	var baidUid = "${store.baidUid}";
	
	var name =  $("#name").val();
	var tel = $("#tel").val();
	
	var provice = $("#province").val();
	var city = $("#city").val();
	var area = $("#area").val();
	var address_detail = $("#address_detail").val();
	
	var lat = $("#lat").val();
	var lng = $("#lng").val();
	
	//var bizClassify = $("#bizClassify").val();
	var id1 = $("#id1").val();
	var bizClassify1 = $("#bizClassify1").val();
	var id2 = $("#id2").val();
	var bizClassify2 = $("#bizClassify2").val();
	var id3 = $("#id3").val();
	var bizClassify3 = $("#bizClassify3").val();
	
	/* var bizClassify = '${store.bizClassify}';
	var bizClassify1 = ${store.bizClassify1};
	var bizClassify2 = ${store.bizClassify2};
	var bizClassify3 = ${store.bizClassify3}; */
	var contactName = $("#contactName").val();
	var contactPhone = $("#contactPhone").val();
	var busImg = $("#busImg").val();
	var shopImg = $("#shopImg").val();
	
	if (!name||name=='') {
		alert("店铺名称不能为空");
		return;
	}
	if (!tel||tel=='') {
		alert("店铺电话不能为空");
		return;
	}
	if (!provice||provice==''||!city||city==''||!area||area==''||!address_detail||address_detail=='') {
		alert("店铺地址不能缺失");
		return;
	}
	if (!lat||lat==''||!lng||lng=='') {
		alert("未在百度地图上进行标记");
		return;
	}
	if (!bizClassify1||bizClassify1==''||!bizClassify2||bizClassify2=='') {
		alert("行业信息不能为空");
		return;
	}
	if (!contactName||contactName=='') {
		alert("负责人姓名不能为空");
		return;
	}
	if (!contactPhone||contactPhone=='') {
		alert("负责人电话不能为空");
	}
	/* if (!busImg||busImg=='') {
		alert("营业执照不能为空");
		return;
	} */
	if (!shopImg||shopImg=='') {
		alert("门店照片不能为空");
		return;
	}
	
	var data = {"userId":userId,"qualificationId":qualificationId,"baidUid":baidUid,"name":name,"tel":tel,"provice":provice,"city":city,"area":area,"address_detail":address_detail,"lat":lat,"lng":lng,"id1":id1,"bizClassify1":bizClassify1,"id2":id2,"bizClassify2":bizClassify2,"id3":id3,"bizClassify3":bizClassify3,"contactName":contactName,"contactPhone":contactPhone,"busImg":busImg,"shopImg":shopImg};
	var url = "${base}/agent/store/addAndBind.xhtml";
	 $.ajax({
			url: url,
			type: "POST",
			data: data,
			dataType: "JSON",
			success: function (data) {
				if (data.errCode==0) {
					alert(data.msg);
					//var qualificationId = data.data.qualificationId;
					var qualificationId = $("#qualificationId").val();
					var mcode = data.data.mcode;
					$("#mcode").val(mcode);
					window.location.href="${base}/agent/store/addAndBindResult.xhtml?mcode="+mcode+"&qualificationId="+qualificationId;
				}
				else{
					alert(data.msg);
				}
			},
			error: function (data) {
				alert('服务端报错' + data.msg);
			}
		}); 
}
function backToSearchPage() {
	window.history.go(-1);
}
/* 
$(function () {
	//省市区三级联动（省--市）
	var edit_city = '';
	$("#province").change(function () {
		var html = "<option value=''>城市</option>";
		$("#city").html(html);
		
		var prov = "prov";
		var value = $(this).val();
		var url = "http://www.wangpos.com/service/address/refreshCity";
		var data = {"key": prov,"value":value,"url":url};
        $.ajax({
			url: "${base}/agent/agent/authorZone.xhtml",
			type: "POST",
			data: data,
			dataType: "JSON",
			success: function (data) {
				var ison = data +";";
				if (data.status == 0) {
					//hintError("数据错误");
					alert("数据错误");
					return;
				}
				var list = data.data;
				html = ''
				for (var i = 0; i < list.length; i++) {
					html += '<option value="' + list[i] + '">' + list[i] + '</option>';
				}
				// $("#prov").val(val);
				$("#city").html(html);
				if(edit_city != ''){
					$('#city').val(edit_city);
				}
				$('#city').change();
			},
			error: function (data) {
				alert('服务端报错' + data.status);
			}
		}); 
    });
});
//省市区三级联动（市--区）
	var edit_area = '';
	$("#city").change(function () {
	    var html = "<option value=''>城市</option>";
	    $("#area").html(html);
	   	var prov = $('#province').val();
	    var city = $(this).val();
	    var url = "http://www.wangpos.com/service/address/refreshArea";
	    var data = {"key1": "prov","value1":prov,"key2":"city","value2":city,"url":url};
		$.ajax({
	        url: "${base}/agent/store/authorZone.xhtml",
	        type: "POST",
	        data:data,
	        dataType: "json",
	        success: function (data) {
	        	var ison = data +";";
	        	
	        	if (data.status == 0) {
					//hintError("数据错误");
					alert("数据错误");
					return;
				}
				var list = data.data;
				html = ''
				for (var i = 0; i < list.length; i++) {
					html += '<option value="' + list[i] + '">' + list[i] + '</option>';
				}
				// $("#prov").val(val);
				$("#area").html(html);
				if(edit_area != ''){
					$('#area').val(edit_area);
				}
				$('#area').change();
	        	
	            
	        },
	        error: function (data) {
	            alert('服务端报错' + data.status);
	        }
		});
		});
		
	

	//百度地图：根据位置定位标注
 	$("#markBtn").click(function () {
		//var province = $("#province").val();
     	var city = $("#city").val();
     	var area = $("#area").val();
     	var detail = $("input[name='addressDetail']").val();
     	if (!province || !city || !area || !detail) {
         	alert('请输入店铺地址后再进行标记');
         	return;
     	}
     	$("#markBtn").val('标记中...');
     	$("#markBtn").prop({disabled: true});
     	$.ajax({
         	url: "${base}/agent/map/location2Geo.xhtml",
         	type: "POST",
         	data: {
				city: city,
				area: area,
				detail: detail
         	},
         	dataType: "json",
         	success: function (data) {
				alert(data.info);
				if (data.status == 0) {
					// 标注地图
					map.clearOverlays();
					//var locations = data.data.split(",");//lng+","+lat
					//定义一个中心点坐标
                 	var point = new BMap.Point(data.data.lng, data.data.lat);
                 	//设定地图的中心点和坐标并将地图显示在地图容器中
                 	map.centerAndZoom(point, 15);   
                 	//创建标注	
                 	var marker = new BMap.Marker(point);
                 	//跳动的动画
                 	marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                 	//将标注添加到地图中
                 	map.addOverlay(marker);  
                 	map.setCenter(point);
					//记录一下经纬度
                	$("#lng").val(data.data.lng);
                 	$("#lat").val(data.data.lat);
             	} else {
                 	map.clearOverlays();
             	}
             	$("#markBtn").val('在地图上标记');
             	$("#markBtn").prop({disabled: false});
         	},
         	error: function (data) {
             	//art.dialog('服务端报错' + data.status); 
             	alert('服务端报错' + data.status);
             	$("#markBtn").val('在地图上标记');
             	$("#markBtn").prop({disabled: false});
         	}
     	});
 	});
	
//上传图片
	new AjaxUpload('#busImgUpload', {
		action: "${base}/agent/file/upload.xhtml",
		name: 'myfile',
		data: {},
		autoSubmit: true,
		responseType: 'json',
		onSubmit: function (filename, ext) {
			//设置允许上传的文件格式
			if (!(ext && /^(jpg|png|gif)$/.test(ext.toLowerCase()))) {
				alert('文件只能为jpg|png|gif格式');
				return false;
			}
			$("#busImgUpload").val("上传中...");
		},
		onComplete: function (filename, data) {
			if (data.status == 0) {
				$("#busImgDiv").show();
				$("#busImg").val(data.data);
				var url = '${aliyunUrl}' + data.data;
				$("#busImgSrc").attr("src", url).fadeIn();
				
				$("#busImgUpload").val("营业执照");
				
				//设置到sessionStorage
				if(window.sessionStorage){
					var s = window.sessionStorage;
					var baiduMerchant = JSON.parse(s.getItem('baidu'));
					baiduMerchant.busImg = data.data;
					s.setItem('baidu', JSON.stringify(baiduMerchant));
				}
			} else {
				alert(data.info);
			}
		}
	});
	
	new AjaxUpload('#shopImgUpload', {
		action: "${base}/agent/file/upload.xhtml",
		name:'myfile',
		data:{},
		autoSubmit:true,
		responseType: 'json',
		onSubmit : function(filename,ext){
			//设置允许上传的文件格式
			if (!(ext && /^(jpg|png|gif)$/.test(ext.toLowerCase()))){
				alert('文件只能为jpg|png|gif格式');
				return false;
			}
			
			var shopImgArr = $("#shopImg").val().split(',');
			if(shopImgArr.length == 6){
                    dangerHint('最多上传六张图片');
                    return false;
			}
			
			$("#shopImgUpload").val("上传中...");
			
		},
		onComplete: function(filename,data) {
			if(data.status == 0){
				var url = '${aliyunUrl}' + data.data;
				var imgT="<img width=\"100\" height=\"100\" src=\""+url+"\" style=\"display: inline-block;\">";
				$("#shopImgDiv").append(imgT);
				
				var shopImg = $("#shopImg").val();
				if(shopImg.length > 0){
					shopImg += ',';
				}
				shopImg += data.data;
				$('#shopImg').val(shopImg);
				                
                $("#shopImgUpload").val("店面实景图");
                
                //设置到sessionStorage
				if(window.sessionStorage){
					var s = window.sessionStorage;
					var baiduMerchant = JSON.parse(s.getItem('baidu'));
					baiduMerchant.shopImg = shopImg;
					s.setItem('baidu', JSON.stringify(baiduMerchant));
				}
			}
		}
	});

	function init(){
		if(window.sessionStorage && window.sessionStorage.getItem('baidu')){
			var s = window.sessionStorage;
			var baiduMerchant = JSON.parse(s.getItem('baidu'));
			
			//load sessionStorage's baiduMerchant
			$('#from').val(baiduMerchant.from);
			if(baiduMerchant.from == 'baidu'){
				$('#uid').val(baiduMerchant.uid);
				$('#shopName').val(baiduMerchant.name);
				$('#shopPhone').val(baiduMerchant.telephone);	
				$('#addressDetail').val(baiduMerchant.address);
				$('#LATITUDE').val(baiduMerchant.location.lat);
				$('#LONGITUDE').val(baiduMerchant.location.lng);
			}else{
				
			}

			//设置上传图片
			if(baiduMerchant.busImg){
				$("#busImg").val(baiduMerchant.busImg);
				
				$("#busImgDiv").show()
				var url = '${aliyunUrl}' + baiduMerchant.busImg;
				$("#busImgSrc").attr("src", url).fadeIn();
			}
			//设置上传图片
			if(baiduMerchant.shopImg){
				$("#shopImg").val(baiduMerchant.shopImg);
				
				var shopImgArr = baiduMerchant.shopImg.split(',');
				
				$("#shopImgDiv").show();
				for(var i = 0; i < shopImgArr.length; i++){
					var url = '${aliyunUrl}' + shopImgArr[i];	
					var shopImg = "<img width=\"100\" height=\"100\" src=\""+url+"\" style=\"display: inline-block;\">";
					$("#shopImgDiv").append(shopImg);
				}
			}
			
			//获取下拉菜单定位信息
			$.ajax({
	         	url: "${base}/agent/map/geo2Location.xhtml",
	         	type: "POST",
	         	data: {
					lat: baiduMerchant.location.lat,
					lng: baiduMerchant.location.lng
	         	},
	         	dataType: "json",
	         	success: function (data) {
					if (data.status == 0) {
						$('#province').val(data.data.province);
						$('#fcity').val(data.data.city);
						$('#farea').val(data.data.district);
						
						$("#province").trigger("change");
						$("#city").trigger("change");
	             	} 

	         	},
	         	error: function (data) {
	             	art.dialog('服务端报错' + data.status);
	         	}
	     	});
		}
		
		//初始化地图
		loadMapScript();
	}

	init();
	
	function backToSearchPage() {
		window.history.go(-1);
	}


function preview() {
	var shopName = $("#shopName").val()
	if (!shopName) {
		dangerHint('店铺名称不能为空');
		$("#shopName").focus();
		return false;
	}

	var shopPhone = $("#shopPhone").val()
	if (!shopPhone) {
		dangerHint('店铺电话不能为空');
		$("#shopPhone").focus();
		return false;
	}

	var area = $("#area").val();
	if (!area || area == '区域') {
		dangerHint('请选择所在区域')
		$("#area").focus();
		return false;
	}

	var addressDetail = $("#addressDetail").val()
	if (!addressDetail) {
		dangerHint('店铺地址不能为空');
		$("#address_detail").focus();
		return false;
	}
	//valLocation()

	var isCheckBizClassify = false;
	$("input[name='bizClassify']:checked").each(function (index, element) {
		isCheckBizClassify = true;
	});

	if(!isCheckBizClassify) {
		dangerHint('请选择行业类别')
		$("input[name='bizClassify']").focus();
		return false;
	}

	var contactName = $("#contactName").val()
	if (!contactName) {
		dangerHint('联系人不能为空');
		$("#contactName").focus();
		return false;
	}

	var regStr = /(^[1][0-9]{10}$)/;
	var reg = new RegExp(regStr);
	var contactPhone = $("#contactPhone").val();
	if (!reg.test(contactPhone)) {
		dangerHint('手机号格式不正确');
		$("#contactPhone").focus();
		return false;
	}

	$('#dataForm').submit();
	//var data = $('#dataForm').serialize();
	//var from = $("#from").val()
	//window.location.href ="${absUrl}merchant/preview?"+data;
} 
*/
</script>
</body>
</html>